<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="学生名字" prop="stuname">
        <el-select v-model="queryParams.studentid" filterable allow-create remote :remote-method="remoteSearch"
          placeholder="请输入或选择学生信息" clearable @change="handleQuery" size="medium" class="w-full">
          <el-option v-for="item in studentList" :key="item.studentid" :label="item.stuname" :value="item.studentid" />
        </el-select>
      </el-form-item>
      <el-form-item label="服务人员" prop="userName">
        <el-select v-model="queryParams.userName" filterable allow-create remote :remote-method="remoteSearch"
          placeholder="请输入或选择服务人员" clearable @change="handleQuery" size="medium" class="w-full">
          <el-option v-for="item in serviceList" :key="item.userId || item.userName" :label="item.userName"
            :value="item.userName" />
        </el-select>
      </el-form-item>
      <el-form-item label="跟进方式" prop="userName">
        <el-select v-model="queryParams.recordTypeId" filterable allow-create remote :remote-method="remoteSearch"
          placeholder="请选择跟进方式" clearable @change="handleQuery" size="medium" class="w-full">
          <el-option v-for="item in recordTypeList" :key="item.recordTypeId" :label="item.typeName"
            :value="item.recordTypeId" />
        </el-select>
      </el-form-item>
      <el-form-item label="记录时间" prop="recordDate">
        <el-date-picker clearable v-model="queryParams.recordDate" type="date" value-format="YYYY-MM-DD"
          placeholder="选择跟踪记录时间">
        </el-date-picker>
      </el-form-item>
      <div>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['record:record:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['keyallocation:keyallocation:remove']">删除</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="Sort"
          @click="toggleExpandAll"
        >展开/折叠</el-button>
      </el-col> -->
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-if="refreshTable" v-loading="loading" :data="recordList" row-key="userId"
      :default-expand-all="isExpandAll"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"><el-table-column label="跟进记录id" align="center"
        prop="recordid" />
      <el-table-column label="学生信息" align="center" prop="stuName" />
      <el-table-column label="服务人员信息" align="center" prop="userName" />
      <el-table-column label="学生类型" prop="stutype" />
      <el-table-column label="跟进方式" align="center" prop="recordTypeName" />
      <el-table-column label="跟踪记录时间" align="center" prop="recordDate" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.recordDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="跟踪记录内容" align="center" prop="recordMsg" />
      <el-table-column label="上传图片" align="center" prop="img" width="100">
        <template #default="scope">
          <image-preview :src="scope.row.img" :width="50" :height="50" />
        </template>
      </el-table-column>
      <el-table-column label="是否重点标记" align="center" prop="isMarking" />

      <el-table-column label="状态" align="center" width="80">
        <template #default>
          <el-tag type="success">
            显示
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['record:record:edit']">修改</el-button>
          <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)"
            v-hasPermi="['record:record:add']">新增</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
            v-hasPermi="['record:record:remove']">删除</el-button>
          <el-button link type="success" icon="Check" @click="handleRegistration(scope.row)"
            v-hasPermi="['studentinfo:studentinfo:edit']">
            转为报名
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getList" />
    <!-- 添加或修改跟进记录对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="recordRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="服务人员" prop="parentId">
          <el-tree-select v-model="form.parentId" :data="treeServiceList" :props="{
            value: 'userId',
            label: 'userName',
            children: 'children'
          }" value-key="userId" placeholder="请选择上级服务人员" check-strictly clearable @change="handleParentIdChange"
            style="width: 100%;" />
        </el-form-item>
        <el-form-item label="学生名字">
          <el-select v-model="form.studentid" placeholder="请先选择服务人员" clearable :disabled="!form.userId"
            @focus="checkServiceSelected" @visible-change="handleVisibleChange"
            :class="{ 'show-tip-animation': showServiceTip }">
            <el-option v-for="item in studentList" :label="item.stuname" :value="item.studentid"
              :key="item.studentid" />
          </el-select>

          <el-tooltip v-if="showServiceTip" content="请先选择服务人员" placement="top" effect="light">
            <el-tag type="warning" size="small">未选择服务人员</el-tag>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="学生类型">
          <el-select v-model="form.stutype" placeholder="请选择学生类型" clearable>
            <el-option v-for="item in studenttypeList" :label="item.typename" :value="item.typename" />
          </el-select>
        </el-form-item>
        <el-form-item label="跟进方式">
          <el-select v-model="form.recordTypeId" placeholder="请输入跟进方式" clearable>
            <el-option v-for="item in recordTypeList" :label="item.typeName" :value="item.recordTypeId" />
          </el-select>
        </el-form-item>
        <el-form-item label="记录时间" prop="recordDate">
          <el-date-picker clearable v-model="form.recordDate" type="date" value-format="YYYY-MM-DD"
            placeholder="选择跟踪记录时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="记录内容" prop="recordMsg">
          <el-input v-model="form.recordMsg" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="上传图片" prop="img">
          <image-upload v-model="form.img" />
        </el-form-item>
        <el-form-item label="是否重点标记" prop="isMarking">
          <el-input v-model="form.isMarking" placeholder="数字越小，时间越早优先级越高" />
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 报名表单 -->
    <el-dialog class="registration-container" v-model="Registrationopen">
      <el-form ref="studentinfo" :model="form" :rules="rules" label-width="120px" label-position="top">
        <!-- 学生基本信息 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="section-title">学生基本信息</div>
          </template>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="学生姓名" prop="stuname">
                <el-input v-model="form.stuname" placeholder="请输入学生姓名" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="学生性别" prop="stusex">
                <el-radio-group v-model="form.stusex">
                  <el-radio-button disabled label="男" :class="{ 'active-radio': form.stusex === '男' }">
                    男
                  </el-radio-button>
                  <el-radio-button disabled label="女" :class="{ 'active-radio': form.stusex === '女' }">
                    女
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="身份证号" prop="form.stucardnumber">
                <el-input v-model="form.stucardnumber" placeholder="请输入18位身份证号" maxlength="18" show-word-limit />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学生电话" prop="form.stuphone">
                <el-input v-model="form.stuphone" placeholder="请输入手机号码" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="家庭住址" prop="form.stuaddress">
            <el-input v-model="form.stuaddress" type="textarea" :rows="2" readonly
              :style="{ '::v-deep .el-textarea__inner': { cursor: 'default', backgroundColor: '#f5f7fa' } }" />
          </el-form-item>
        </el-card>

        <!-- 监护人信息 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="section-title">监护人信息</div>
          </template>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="监护人姓名" prop="stufamilyname">
                <el-input v-model="form.stufamilyname" placeholder="无监护人信息" readonly class="readonly-input" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="监护人手机号" prop="stufamilyphone">
                <el-input v-model="form.stufamilyphone" placeholder="无联系电话" readonly class="readonly-input" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 报名课程 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="section-title">报名课程</div>
          </template>

          <el-form-item prop="form.course">
            <el-select v-model="form.course" multiple placeholder="请选择报名课程" style="width: 100%" aria-required="true">
              <el-option v-for="course in couresList" :key="course.courseId" :label="course.courseName"
                :value="course.courseId" />
            </el-select>
          </el-form-item>
        </el-card>

        <!-- 提交按钮 -->
        <div class="submit-area">
          <el-button type="primary" size="large" @click="submitRegistration()" :loading="submitting">
            提交报名
          </el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>



</template>

<script setup name="Record">
import { listRecord, getRecord, delRecord, addRecord, updateRecord } from "@/api/record/record";
import { listService } from "@/api/system/user";
import { getCurrentInstance, ref, reactive, toRefs, computed, nextTick } from "vue";
import { ElTreeSelect } from "element-plus";
import { listStudenttype } from "@/api/student/studenttype/studenttype"
import { listKeyallocation, updateKeyallocation } from "@/api/keyallocation/keyallocation"
import { listRecordtype } from "@/api/recordtype/recordtype"
import { listStudentinfo, updateStudentinfo, getStudentinfo } from "@/api/student/studentinfo/studentinfo"
import { getTbcourse, listTbcourse } from "@/api/tbcourse/tbcourse"
import { addRegistration } from "@/api/registration/registration"
const { proxy } = getCurrentInstance();
const serviceList = ref([]);
const recordList = ref([]);
const studenttypeList = ref([])
const studentList = ref([])
const recordTypeList = ref([])
const recordOptions = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const title = ref("");
const isExpandAll = ref(true);
const refreshTable = ref(true);
const total = ref(0)
const data = reactive({
  form: {
    recordid: null,
    stutype: null,
    recordTypeId: null,
    recordDate: null,
    recordMsg: null,
    img: null,
    isMarking: null,
    parentId: null,
    studentid: null,
    userNewId: null,
    state: null,
    userId: null,
    userName: null,
    stuname: null,
    recordtypename: null,
    stuTypeId: null,
    course: null,
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    stutype: null,
    recordTypeId: null,
    recordDate: null,
    recordMsg: null,
    img: null,
    isMarking: null,
    parentid: null,
    studentid: null,
    userId: null,
    state: null,
    userNewId: null,
  },
  rules: {
    recordTypeId: [
      { required: true, message: "跟进方式不能为空", trigger: "blur" }
    ],
    studentid: [
      { required: true, message: "关联学生信息不能为空", trigger: "blur" }
    ],
    userId: [
      { message: "关联用户表：服务人员信息不能为空", trigger: "blur" }
    ],
    stuTypeId: [
      { required: true, message: "学生类型不能为空", trigger: "blur" }
    ],

  }
});
const { queryParams, form, rules } = toRefs(data);
const showServiceTip = ref(false);


//对报名功能的实现
const Registrationopen = ref(false)
//点击转为报名按钮
async function handleRegistration(row) {
  if (!row.studentid) {
    proxy.$modal.msgWarning('请先选择一条数据')
    return
  }
  reset()
  Registrationopen.value = true
  const _studentid = row.studentid

  const studentResponse = await getStudentinfo(_studentid);
  form.value = await studentResponse.data;

}

async function submitRegistration() {
  if (form.value.course == null) {
    proxy.$modal.msgWarning('请先选择课程')
    return
  }

  const requests = form.value.course.map(id => getTbcourse(id));
  const results = await Promise.all(requests);
  const prices = results.map(item => Number(item.data.price)) || 0;

  const tbregistration = ref({
    stuId: form.value.studentid,
    userName: form.value.stuname,
    phone: form.value.stuphone,
    emergency: form.value.stufamilyphone,
    stucardnumber: form.value.stucardnumber,
    stufamilyname: form.value.stufamilyname,
    stuaddr: form.value.stuaddress,
    course: form.value.courseId,
    studentSource: '跟进池报名',
    courseId: Array.isArray(form.value.course)
      ? form.value.course.join(',')
      : form.value.course || '',
    gender: form.value.stusex === '男' ? 0 : 1,
    payFees: prices.reduce((a, b) => a + b, 0),
  })

  addRegistration(tbregistration.value).then(response => {
    if (response.code === 200) {
      proxy.$modal.msgSuccess("报名成功");
      Registrationopen.value = false
      reset()
      getList()
    } else {
      proxy.$modal.msgError(response.msg)
    }
  })
}

//获取课程的信息
const couresList = ref([]);
const courseParam = reactive({
  pageNum: 1,
  pageSize: 100
});
function getallcouresList() {
  listTbcourse(courseParam).then(response => {
    couresList.value = response.rows
  })
}
getallcouresList()
/** 监听服务人员选择框是否可见 */
function checkServiceSelected() {
  if (!form.value.userId) {
    showServiceTip.value = true;
    // 阻止下拉列表展开
    nextTick(() => {
      const selectElement = document.querySelector('.el-select-dropdown');
      if (selectElement) {
        selectElement.style.display = 'none';
      }
    });
  }
}

// 处理下拉列表显示状态
function handleVisibleChange(visible) {
  if (visible && !form.value.userId) {
    showServiceTip.value = true;
    // 强制关闭下拉列表
    nextTick(() => {
      const selectComponent = document.querySelector('.el-select.is-focus');
      if (selectComponent) {
        selectComponent.click();
      }
    });
  } else {
    showServiceTip.value = false;
  }
}
//当点击服务人员信息后，向后端发送请求获取该服务人员的关联学生信息
const getStudentByService = (userId) => {
  if (!userId) {
    studentList.value = [];
    return Promise.resolve([]);
  }
  return listKeyallocation(
    {
      userId: userId,
      state: 0,
    }
  ).then(response => {
    studentList.value = response.rows;
    studentList.value = response.rows
    console.log("该服务人员的关联学生信息", studentList.value)
  })
}
// 树形结构数据（适配 el-tree-select）
const treeServiceList = computed(() => {
  return serviceList.value.map(item => ({
    ...item,
    children: []
  }));
});


/** 获取服务人员列表 */
const getServiceList = () => {
  listService().then(response => {
    serviceList.value = response.rows;
    console.log("服务人员列表", serviceList.value);
  });
};
getServiceList();

/** 查询跟进记录列表 */
// function getList() {
//   loading.value = true;
//   queryParams.value.state = 0
//   listRecord(queryParams.value).then(response => {
//     recordList.value = proxy.handleTree(response.data, "userId", "parentid");
//     total.value = response.total; // 获取总记录数
//     loading.value = false;
//     console.log("查询跟进记录列表", recordList.value);
//   });
// }
function getList() {
  loading.value = true;
  queryParams.value.state = 0;

  listRecord(queryParams.value).then(response => {
    console.log("响应数据:", response);

    // 确保 response.rows 是一个数组
    const dataArray = Array.isArray(response.rows) ? response.rows : [];

    // 如果数据为空，直接赋值空数组
    if (dataArray.length === 0) {
      recordList.value = [];
      total.value = 0;
      loading.value = false;
      return;
    }

    // 处理树形结构
    recordList.value = proxy.handleTree(dataArray, "userId", "parentid");
    total.value = response.total || 0;
    loading.value = false;
  });
}
// 获取学生信息
const queryStudent = reactive({
  pageNum: 1,
  pageSize: 10,
  stuname: null,
  state: null
})
/** 获取学生列表 */
const getStudentList = () => {
  queryStudent.state = 0
  listStudentinfo(queryStudent).then(response => {
    studentList.value = response.rows
    console.log("学生列表", studentList.value)
  })
}
getStudentList()
const queryData = reactive({
  pageNum: 1,
  pageSize: 10,
  typename: null,
  state: null
})
/** 获取学生类型列表 */
const getStudenttypeList = () => {
  queryData.state = 0
  listStudenttype(queryData).then(response => {
    studenttypeList.value = response.rows
  })
}
getStudenttypeList()
const queryDa = reactive({
  pageNum: 1,
  pageSize: 10,
  typeName: null,
  state: null
})
/** 获取跟进方式列表 */
const getRecordtypeList = () => {
  queryDa.state = 0
  listRecordtype(queryDa).then(response => {
    recordTypeList.value = response.rows
    console.log("跟进方式列表", recordTypeList.value)
  })
}
getRecordtypeList()

/** 查询跟进记录下拉树结构 */
function getTreeselect() {
  listRecord().then(response => {
    recordOptions.value = [];

    // 确保response.data是数组
    const dataArray = Array.isArray(response.data) ? response.data : [];

    if (dataArray.length > 0) {
      const rootNode = { userId: 0, userName: '顶级节点', children: [] };
      rootNode.children = proxy.handleTree(dataArray, "userId", "parentid");
      recordOptions.value.push(rootNode);
    }
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  Registrationopen.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    recordid: null,
    stutype: null,
    recordTypeId: null,
    recordDate: null,
    recordMsg: null,
    img: null,
    isMarking: null,
    parentId: null,
    studentid: null,
    userNewId: null,
    state: null
  };
  proxy.resetForm("recordRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 新增按钮操作 */
function handleAdd(row) {
  reset();
  getTreeselect();
  if (row && row.userId) {
    // 行内新增，默认上级服务人员为当前行的 userId 对应的人员
    form.value.parentId = row.userId;
    // 根据 parentId 查找对应的服务人员信息并填充
    const targetUser = serviceList.value.find(item => item.userId === row.userId);
    if (targetUser) {
      form.value.userNewId = targetUser.userName;
      form.value.userId = targetUser.userId;
      console.log("选择的上级服务人员", form.value.userId);
      console.log(targetUser.userId);
      console.log("选择的上级服务人员+++++++++++++");

    }
  } else {
    // 顶部新增，可根据需求设置默认值，比如初始为 null 让用户选择
    form.value.parentId = null;
    form.value.userNewId = null;
  }
  open.value = true;
  title.value = "添加跟进记录";
}
//记录学生类型的状态
const recordState = ref('')
/** 修改按钮操作 */
async function handleUpdate(row) {
  reset();
  await getTreeselect();
  if (row) {
    form.value.parentId = row.parentId;
    // 修改时，根据已有的 parentId 填充服务人员信息展示
    const targetUser = serviceList.value.find(item => item.userId === row.parentId);
    if (targetUser) {
      form.value.userNewId = targetUser.userName;
    }
  }
  getRecord(row.recordid).then(response => {
    form.value = response.data;
    console.log("333", form.value)
    recordState.value = form.value.stutype
    // console.log("111111111",recordState)
    open.value = true;
    title.value = "修改跟进记录";
  });


}

/** 当选择上级服务人员时触发，用于自动填充关联信息 */
async function handleParentIdChange(value) {
  const targetUser = serviceList.value.find(item => item.userId === value);
  console.log("选择的上级服务人员11", targetUser);
  if (targetUser) {
    form.value.userNewId = targetUser.userName;
    form.value.userId = targetUser.userId;
    await getStudentByService(targetUser.userId)
    console.log("选择的上级服务人员22", form.value.userId);
  }
}


/** 提交按钮 */
async function submitForm() {
  try {
    // 表单验证
    const isValid = await new Promise(resolve => {
      proxy.$refs["recordRef"].validate(valid => resolve(valid));
    });

    if (!isValid) return;

    console.log("recordState", recordState.value);
    console.log("form.value", form.value);

    // 查找当前学生类型ID，增加空值检查
    const studentType = studenttypeList.value.find(item => item.typename === form.value.stutype);
    if (!studentType) {
      throw new Error("未找到匹配的学生类型");
    }

    const nowStudentTypeid = studentType.stuTypeId;
    console.log("nowStudentTypeid", nowStudentTypeid);

    if (form.value.recordid != null) {
      // 更新记录
      await updateRecord(form.value);
      proxy.$modal.msgSuccess("修改成功");

      // 同步更新线索池管理：学生类型和线索分配
      if (recordState.value !== form.value.stutype) {
        const studentinfo = {
          studentid: form.value.studentid,
          stuTypeId: nowStudentTypeid
        };
        const studentinfo1 = {
          studentid: form.value.studentid,
          stuTypeId: nowStudentTypeid
        };
        // 并行执行更新操作，并等待所有操作完成
        await Promise.all([
          updateStudentinfo(studentinfo).then(() => {
            console.log("修改学生类型成功");
          }),
          updateKeyallocation(studentinfo).then(() => {
            console.log("修改线索分配成功");
          })
        ]);
      }
    } else {
      // 新增记录
      await addRecord(form.value);
      console.log("新增跟进记录成功");
      proxy.$modal.msgSuccess("新增成功");
    }

    // 关闭表单并刷新列表
    open.value = false;
    getList();

  } catch (error) {
    console.error("提交表单失败:", error);
    proxy.$modal.msgError("操作失败，请重试");
  }
}
function handleDelete(row) {
  let recordListIds = [];
  let confirmMessage = '';
  if (row && row.recordid) {
    recordListIds = [row.recordid];
    confirmMessage = `是否确认删除记录编号为"${row.recordid}"的数据项？`;
  } else if (ids.value.length > 0) {
    recordListIds = ids.value;
    const selectedCount = ids.value.length;
    confirmMessage = `是否确认删除选中的${selectedCount}条跟进记录记录？`;
  } else {
    proxy.$modal.msgWarning("请选择要删除的记录");
    return;
  }

  proxy.$modal.confirm(confirmMessage).then(async () => {
    try {
      loading.value = true;
      await Promise.all(recordListIds.map(id => {
        return updateRecord({
          recordid: id,
          state: 1
        });
      }));
      recordList.value = recordList.value.filter(
        item => !recordListIds.includes(item.recordid)
      );

      proxy.$modal.msgSuccess("删除成功");
    } catch (error) {
      // 关键：打印错误信息，定位问题
      console.error("删除失败:", error);
      proxy.$modal.msgError("删除失败: " + (error.message || "未知错误"));
    } finally {
      loading.value = false;
      ids.value = [];
      single.value = true;
      multiple.value = true;
    }
  }).catch(() => { });
}
getList();
</script>

<style scoped>
/* 可根据实际需求调整树形选择器的样式，让其和其他组件更协调 */
:deep(.el-tree-select .el-input__wrapper) {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}

:deep(.el-tree-select .el-input__wrapper:hover) {
  border-color: #c0c4cc;
}

:deep(.el-tree-select .el-input__wrapper:focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
</style>
